<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">分销设置</div>
      <div class="ele-page-desc"> 用于用户分销设置参数配置。 </div>
    </div>
    <div class="ele-body">
      <el-card shadow="never">
        <el-form ref="form"
                 :model="form"
                 :rules="rules"
                 label-width="120px">
          <el-row :gutter="20">
            <el-col :sm="12">
              <el-form-item label="是否开启:"
                            prop="distribution_level">
                <el-radio-group v-model="form.distribution_level"
                                @input="isSetup">
                  <el-radio label="0"
                            value="0"
                            checked="true">关闭</el-radio>
                  <el-radio label="1"
                            value="1">一级分销</el-radio>
                  <el-radio label="2"
                            value="2">二级分销</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item v-if="isStartBoolen"
                            label="一级分销:"
                            prop="first_commission">
                <el-input v-model="form.first_commission"
                          style="width: 250px"
                          min="0"
                          max="100"
                          type="number"
                          placeholder="一级分销收益比例"
                          clearable>
                  <template slot="append">%</template>
                </el-input>
                <div style="color: #b4b4b4">每笔订单完成时计算，分销佣金=实际支付金额●分销比例</div>
              </el-form-item>
              <el-form-item v-if="isStartBoolen && !isDistributionBoolen"
                            label="二级分销:"
                            prop="second_commission">
                <el-input v-model="form.second_commission"
                          style="width: 250px"
                          min="0"
                          max="100"
                          type="number"
                          placeholder="二级分销收益比例"
                          clearable>
                  <template slot="append">%</template>
                </el-input>
                <div style="color: #b4b4b4">每笔订单完成时计算，分销佣金=实际支付金额●分销比例</div>
              </el-form-item>

              <!-- <el-form-item label="最低提现金额:"
                            prop="withdrawal_commission_condition">
                <el-input min="0"
                          type="number"
                          v-model="form.withdrawal_commission_condition"
                          style="width: 250px"
                          placeholder="请输入最低提现金额"
                          clearable>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item> -->

              <!-- <el-form-item label="提现手续费率:"
                            prop="withdrawal_fees_ratio">
                <el-input v-model="form.withdrawal_fees_ratio"
                          style="width: 250px"
                          placeholder="请输入提现手续费"
                          clearable
                          min="0"
                          max="100"
                          type="number">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item> -->
              <el-form-item label="分销海报:"
                            prop="poster">
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button"
                       @click="modalPicTap('dan', 'distribution_poster')">
                    <div>
                      <div tabindex="0"
                           class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>
                        <div class="ele-image-upload-item"
                             style="margin: 0 0 0 0"
                             v-if="form.distribution_poster">
                          <div class="el-image">
                            <img :src="form.distribution_poster"
                                 width="100%"
                                 height="100%"
                                 class="el-image__inner"
                                 style="object-fit: cover" />
                          </div>
                          <div class="ele-image-upload-close"
                               @click="handleRemove('distribution_poster')"><i class="el-icon-close"></i></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :sm="12">
              <el-form-item label="分销说明:">
                <tinymce-editor v-model="form.distribution_instructions" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-form-item style="margin: 0 auto; text-align: left">
              <el-button type="primary"
                         :loading="loading"
                         @click="submit">
                提交
              </el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <uploadPictures :isChoice="isChoice"
                    :visible.sync="modalPic"
                    @getPic="getPic"
                    :gridBtn="gridBtn"
                    :gridPic="gridPic"
                    :title="modalTitle"></uploadPictures>
  </div>
</template>
  
  <script>
import uploadPictures from './components/uploadImg';
import TinymceEditor from '@/components/TinymceEditor';
import { config, configEdit } from '@/api/config/index'
// import {
//   distributionModify,
//   distributionDetail,
//   distributionAdd
// } from '@/api/distributionSettings/index.js';
export default {
  name: 'SetBase',
  components: { TinymceEditor, uploadPictures },
  data () {
    return {
      modalTitle: '选择图片',
      picTit: '',
      modalPic: false,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      // 提交状态
      loading: false,
      // 表单数据

      form: {

        // 分销等级
        distribution_level: '0',
        // 一级分销收益比例
        first_commission: '',
        // 二级分销收益比例
        second_commission: '',
        // 分销海报
        distribution_poster: '',
        // 最低额度
        // withdrawal_commission_condition: '',
        // 提现手续费
        // withdrawal_fees_ratio: '',
        // 分销说明
        distribution_instructions: '',

      },
      //   是否启动
      isStartBoolen: true,
      //   是否开启一级分销
      isDistributionBoolen: true,

      // 表单验证规则
      rules: {

      }
    };
  },
  activated () {
    this.querys();
  },
  methods: {
    querys () {
      // 查询回显
      config()
        .then((msg) => {
          console.log(msg);
          if (msg) {
            //   是修改
            this.$util.assignObject(this.form, {
              ...msg.data
            });

            this.isUpdata = true;

            this.isSetup(msg.data.distribution_level);
          } else {
            // 修改
            this.isUpdata = false;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    // 点击是否启动
    isSetup (value) {
      console.log(value);
      if (value == 0) {
        // 启动
        this.isStartBoolen = false;
      } else if (value == 1) {
        // 启动
        this.isStartBoolen = true;
        this.isDistributionBoolen = true;

      } else if (value == 2) {
        this.isStartBoolen = true;
        this.isDistributionBoolen = false;
      } else {
        this.isStartBoolen = false;
      }
    },
    handleRemove (field) {
      this.form[field] = '';
    },
    // 是否开启一级分销
    isStartOneDistribution (value) {
      if (value == 1) {
        // 启动
        this.isDistributionBoolen = true;
      } else {
        this.isDistributionBoolen = false;
      }
    },
    // 选择图片
    modalPicTap (tit, picTit) {
      this.modalTitle = picTit == 'distribution_poster' ? '海报' : '轮播图';
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.modalPic = true;
      this.picTit = picTit;
    },
    // 选中图片
    getPic (pc) {
      console.log(pc);
      switch (this.picTit) {
        case 'distribution_poster':
          this.form.distribution_poster = pc.img;
          break;
      }
      this.modalPic = false;
    },

    /* 提交 */
    /* 表单提交 */
    submit () {
      this.loading = true;
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {
          const data = {
            ...this.form
          };
          //   const saveOrUpdate = this.isUpdata
          //     ? distributionModify
          //     : distributionAdd;
          configEdit(data)
            .then((msg) => {
              this.loading = false;
              console.log(msg)
              // id 不存在则调用查询是否已保存，否则保存多次都会不传id
              // if(!this.form.id){
              this.querys();
              // }
              this.$message.success('提交成功！');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
          return false;
        }
      });
    }
  },
  mounted () { }
};
  </script>
  <style scoped>
.el-radio {
  margin-right: 18px;
}
</style>
  